<template>
  <div>
    <div class="addbut"></div>
    <div id="queryDiv">
      <!--<el-input class="queryInput" v-model="queryForm.mobile" placeholder="手机号"></el-input>-->
      <!--<el-input class="queryInput" v-model="queryForm.nickName" placeholder="名称"></el-input>-->
      <!--<el-button @click="loadGrid()" type="primary" class="search">搜索</el-button>-->
      <el-button @click="toAdd()" type="primary"><i class="el-icon-plus"></i> 新增 </el-button>
    </div>
    <div v-loading="loading.table">
      <el-table :data="bannerList"  style="width: 100%;font-size:12px" border highlight-current-row>
        <el-table-column prop="sort" label="排序" align="center"></el-table-column>
        <el-table-column prop="name" label="Banner名称" align="center"></el-table-column>
        <el-table-column prop="" label="图片" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.imgUrl" style="border-radius: 10%;width: 50px;height: 50px"/>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间"  align="center"></el-table-column>
        <el-table-column  label="操作" min-width="250" align="center">
          <template slot-scope="scope">
            <i class="el-icon-edit el-icon--right"></i>
            <el-button type="text" @click="toEdit(scope.row)">编辑</el-button>
            <i class="el-icon-delete el-icon--right"></i>
            <el-button type="text" @click="deleteBanner(scope.row)">删除</el-button>
            <!--<i class="el-icon-warning el-icon&#45;&#45;right"></i>-->
            <!--<el-button type="text" @click="freeze(scope.row)">冻结用户</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="paginationChangeFn" background layout="prev, pager, next" :page-count="pagination.pageCount"> </el-pagination>
    </div>

    <!--添加人员-->
    <el-dialog :title="bannerTitle" :visible.sync="bannerDialog">
      <el-form ref="bannerForm" :model="bannerForm" :rules="$rules.bannerForm"  label-width="120px" style="margin:20px;" v-loading="bannerForm.loading">
        <el-row>
          <el-col :span="12">
            <el-form-item label="轮播图名称:" prop="name">
              <el-input  v-model="bannerForm.name"  placeholder="请输入轮播图名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="排序:" prop="sort" >
              <el-input  v-model="bannerForm.sort"  type="number" placeholder="请输入排序"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="链接地址:" prop="linkUrl" >
              <el-input  v-model="bannerForm.linkUrl"  type="text" placeholder="请输入链接地址（选填）"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="轮播图:" prop="imgUrl" >
            <el-upload action="javascript:;"
                       class="avatar-uploader"
                       :show-file-list="true"
                       :http-request="imgUploadFn"
                       :on-remove = "imgRemove"
                       :before-upload="beforeImgUpload">
              <img v-if="bannerForm.imgUrl" :src="bannerForm.imgUrl" class="avatar"/>
              <i v-else class="el-icon-plus avatar-uploader-icon" style="color:red;font-size:12px;"></i>
            </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align: center">
          <el-button type="primary" @click="saveBanner()">保存</el-button>
          <el-button type="primary" @click="bannerDialog=false">关闭</el-button>
        </el-row>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
    export default {
        name:'UserList',
        data() {
            return {
                bannerDialog:false,
                bannerTitle:"添加banner",
                bannerForm:{
                    bannerId:0,
                    sort:0,
                    imgUrl:'',
                    name:'',
                    linkUrl:'',
                    loading:false
                },
                bannerList:[],
                queryForm:{
                   mobile:'',
                   nickName:''
                },
                loading: {table: false},
                pagination: {currentPage: 1, pageCount: 0 }//总页数
            };
        },
        methods: {
            paginationChangeFn(currentPage) {
                this.pagination.currentPage = currentPage;
                this.loadGrid();
            },
            saveBanner(){
                this.$refs.bannerForm.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    let params = this.bannerForm;
                    this.bannerForm.loading=true;
                    this.$api.saveBanner(params).then(response => {
                        let result = response.data;
                        if (result.code == 0) {
                            this.$message.success("保存成功！");
                            this.loadGrid();
                            this.bannerDialog = false;
                        } else {
                            this.$message.error(result.msg);
                        }
                        this.bannerForm.loading=false;
                    });
                });
            },
            loadGrid() {
                this.loading.table=true;
                let params= {};
                params.currentPage= this.pagination.currentPage;
                this.$api.listBanner(params).then(response=>{
                    this.loading.table = false;
                    let result = response.data;
                    let data = result.data;
                    if(result.code==0){
                        this.bannerList = data.list;
                    }
                    this.pagination.pageCount = result.data.totalPage;
                });
            },
           toAdd(){
                this.clearBannerForm();
                this.bannerTitle="添加banner";
              this.bannerDialog = true;
            },
            toEdit(row){
                this.bannerTitle="编辑banner";
              this.bannerDialog = true;
              this.clearBannerForm();
              let bannerId = row.bannerId;
              let params = {bannerId:bannerId};
                this.$api.getBannerInfo(params).then(res=>{
                    this.bannerForm.loading = false;
                    let result = res.data;
                    let d = result.data;
                    if(result.code==0) {
                        this.bannerForm.bannerId = row.bannerId
                        this.bannerForm.sort = d.sort;
                        this.bannerForm.imgUrl = d.imgUrl;
                        this.bannerForm.name = d.name;
                        this.bannerForm.linkUrl = d.linkUrl;
                    }else{
                        this.$message.error(result.msg);
                    }
                });
            },
            clearBannerForm(){
                this.bannerForm.bannerId = 0;
                this.bannerForm.imgUrl = '';
                this.bannerForm.sort = 0;
                this.bannerForm.name = '';
            },
            deleteBanner(row){
                this.$confirm('此操作将删除Banner,请确认是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading.table=true;
                    let params = {'bannerId':row.bannerId};
                    this.$api.deleteBanner(params).then(response=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.loadGrid();
                    });
                    this.loading.table=false;
                });
            },
            //身份证正反面
            imgUploadFn(f) {
                this.$api.file(f.file).then(d => {
                    if (d.data.code !== 0) {
                        this.$message.error(d.data.msg);
                        return;
                    }
                    d = d.data.data;
                    this.bannerForm.imgUrl=d;
                });
            },
            //上传前判断
            beforeImgUpload(file) {
                if (file.type === "image/png" || file.type === "image/jpeg") {
                    return true;
                }
                this.$message.error("照片只能是JPG或PNG格式!");
                return false;
            },
            imgRemove(file,fileList) {
                this.bannerForm.imgUrl = '';
            }
        },
        created() {
            this.loadGrid();
        },
        mounted(){
        }
    };
</script>

<style lang="less" scoped>
  .addbut{
    margin-bottom:20px;
  }
  #statusSwitch {
    display: block;
  }
  .el-icon--right{
    color:#4db3ff;
    margin-left:15px
  }
  #queryDiv {
    margin-bottom: 20px;
    .queryInput {
      width:200px;
      margin-right:20px
    }
    .search{
      margin-left:20px
    }
    .btn-add{
      margin-left: 150px;
    }
  }
  .imgsrc{
    margin-left:20px;
    margin-top:10px;
  }
  .el-table .cell {
    white-space: pre-line;
  }




  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px dashed #8c939d;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  .img-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 178px;
    height: 178px;
    overflow: hidden;
  }
  .el-upload--picture-card{
    width: 100px;
    height: 100px;
    line-height: 100px;
  }
  .el-upload-list--picture-card .el-upload-list__item{
    width: 100px!important;
    height: 100px!important;
    line-height: 100px!important;
  }
  .el-upload-list__item .el-icon-close{
    display:block;
    color: red;
  }
  .el-upload-list {
    width: 100px;
  }

</style>
